<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form
        :model="deptQueryForm"
        label-width="120px"
        ref="query_form"
        style="display: flex"
      >
        <div class="query" style="display: flex">
          <el-form-item label="部门名称" prop="deptName">
            <el-input
              v-model="deptQueryForm.deptName"
              placeholder="请输入部门名称"
            />
          </el-form-item>
        </div>

        <div class="clickQuery" style="margin-left: 30px; width: 200px">
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-form>
    </div>

    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="createDept">创建</el-button>
      </div>

      <el-table
        ref="multipleTableRef"
        :data="deptList"
        style="width: 100%"
        row-key="_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button @click="deptEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deptDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="showMadol" title="新增部门">
      <el-form ref="dialogForm" :model="deptForm">
        <el-form-item label="上级部门" prop="parentId">
          <el-cascader
            v-model="deptForm.parentId"
            :options="deptList"
            placeholder="请选择"
            :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
            clearable
          />
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="deptForm.deptName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="负责人" prop="userName">
          <el-select v-model="deptForm.userName" @change="changeEmail">
            <el-option
              v-for="item in userList"
              :key="item._id"
              :label="item.userName"
              :value="`${item.userName}/${item.userEmail}`"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人邮箱" prop="userEmail">
          <el-input v-model="deptForm.userEmail" autocomplete="off" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import api from "../api/index";
import { ref, reactive, toRaw, nextTick } from "vue";
import utils from "../utils/utils";

// 定义查询表单数据
const deptQueryForm = reactive({});
// 拿到查询表单节点
const query_form = ref(null);
// 定义清空表单
const reset = () => {
  query_form.value.resetFields();
  console.log(query_form.value);
};
// 定义查询
const onSubmit = async () => {
  console.log(deptQueryForm);
  // console.log(pager);
  let list = await api.getDeptList(deptQueryForm);
  console.log(list);
  deptList.value = list;
  // console.log(userList.value);
};

// 定义记录用户行为
const action = ref("add");
// 定义弹窗
const showMadol = ref(false);
// 定义获取表单节点dialogForm
const dialogForm = ref(null);
// 定义创建按钮
const createDept = () => {
  action.value = "create";
  showMadol.value = !showMadol.value;
};
// 定义部门列表
let deptList = ref([]);
// 定义用户列表
let userList = ref([]);
// 获取用户列表
const getUsersAllList = async () => {
  userList.value = await api.getUsersAllList();
};
getUsersAllList();
// 定义负责人绑定邮箱
const changeEmail = (userList) => {
  console.log(userList.split("/"));
  let [userName, userEmail] = userList.split("/");
  deptForm.userName = userName;
  deptForm.userEmail = userEmail;
  console.log(userEmail);
  console.log(userName);
};
// 定义角色列表请求参数，也可以作为初始化的表单
let deptForm = reactive({});

// 请求获取部门列表
const getDeptList = async () => {
  let res = await api.getDeptList();
  deptList.value = res;
  console.log(deptList);
};
getDeptList();
// 定义动态表格--格式
const columns = reactive([
  {
    label: "部门名称",
    prop: "deptName",
  },
  {
    label: "负责人",
    prop: "userName",
  },
  {
    label: "更新时间",
    prop: "updateTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);
// 定义表单重置方法
const resetForm = () => {
  dialogForm.value.resetFields();
};
// 定义增加提交按钮
const handleSubmit = () => {
  dialogForm.value.validate(async (vaild) => {
    console.log("进去了");
    if (vaild) {
      console.log("有没有进去啊");
      // 发送提交请求
      let data = toRaw(deptForm);
      data.action = action.value;
      console.log(data);
      let res = await api.deptOperate(data);
      // 重置表单
      resetForm();
      showMadol.value = !showMadol.value;
      getDeptList();
    }
  });
};

// 定义编辑弹窗方法
const deptEdit = (row) => {
  action.value = "edit";
  showMadol.value = !showMadol.value;
  nextTick(() => {
    Object.assign(deptForm, row);
  });
};
// 定义删除方法;
const deptDel = async (row) => {
  action.value = "delete";
  console.log(row._id);
  let data = { action: action.value, ...row };
  await api.deptOperate(data);
  // 重置表单
  resetForm();
  getDeptList();
};
</script>

<style lang="scss" scoped></style>
